<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<%--
<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery-ui.custom.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/jquery.gritter.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/select2.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/datepicker.css" />
<link rel="stylesheet" href="${contextPath}/static/assets/css/bootstrap-editable.css" />--%>

<!-- ajax layout which only needs content area -->
<div class="page-header">
</div><!-- /.page-header -->

<!-- 个人资料列表 -->
<div class="row">
	<div class="col-xs-12">
		<div class="clearfix">
			<div class="pull-left alert alert-success no-margin">
				<button type="button" class="close" data-dismiss="alert">
					<i class="ace-icon fa fa-times"></i>
				</button>

				<i class="ace-icon fa fa-umbrella bigger-120 blue"></i> 查看个人信息和
				... &nbsp;&nbsp;
			</div>
		</div>
		<div class="hr dotted"></div>
		<div class="row">
			<div class="col-sm-8 col-md-offset-2">
				<!-- #section:elements.tab -->
				<div class="tabbable">
					<ul class="nav nav-tabs tab-box" id="myTab" style="border-bottom:none;">
						<li class="active">
							<a data-toggle="tab" href="#home" aria-expanded="true">
								<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
								基本信息
							</a>
						</li>

						<li class="">
							<a data-toggle="tab" href="#messages" aria-expanded="false">
							<i class="ace-icon fa fa-key bigger-120"></i>
								修改密码
							</a>
						</li>
						
					</ul>

					<div class="tab-content">
						<div id="home" class="tab-pane fade active in">
							<div class="row" style="margin-left: 32px;" id="app">
								<div class="dd dd-draghandle">
									<ol class="dd-list">
										<li class="dd-item dd2-item" data-id="13">
											<div class="dd-handle dd2-handle">
												<i class="normal-icon ace-icon fa fa-user red bigger-130"></i>

												<i class="drag-icon ace-icon fa fa-arrows bigger-125"></i>
											</div>
											<div class="dd2-content">{{username}}</div>
										</li>

										<li class="dd-item dd2-item" data-id="14">
											<div class="dd-handle dd2-handle">
												<i class="normal-icon ace-icon fa fa-phone pink bigger-130"></i>

												<i class="drag-icon ace-icon fa fa-arrows bigger-125"></i>
											</div>
											<div class="dd2-content">{{phone}}</div>
										</li>

										<li class="dd-item dd2-item" data-id="19">
											<div class="dd-handle dd2-handle">
												<i class="normal-icon ace-icon glyphicon glyphicon-user blue bigger-130"></i>

												<i class="drag-icon ace-icon fa fa-arrows bigger-125"></i>
											</div>
											<div class="dd2-content">{{roleName}}</div>
										</li>

										<li class="dd-item dd2-item" data-id="15">
											<div class="dd-handle dd2-handle">
												<i class="normal-icon ace-icon fa fa-flag orange bigger-130"></i>

												<i class="drag-icon ace-icon fa fa-arrows bigger-125"></i>
											</div>
											<div class="dd2-content">权限</div>

											<ol class="dd-list">


												<li v-for="privilegeName in privilegeNames" class="dd-item dd2-item" data-id="18">
													<div class="dd-handle dd2-handle">
														<i class="normal-icon ace-icon fa fa-eye green bigger-130"></i>

														<i class="drag-icon ace-icon fa fa-arrows bigger-125"></i>
													</div>
													<div class="dd2-content">{{privilegeName}}</div>
												</li>


											</ol>
										</li>


									</ol>
								</div>
							</div>
						</div>
						<div id="messages" class="tab-pane fade">
							<form class="form-horizontal">
				
								<div class="tab-pane">
									<div class="space-10"></div>

									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-pass1">新密码</label>

										<div class="col-sm-9">
											<input type="password" id="form-field-pass1" class="col-sm-8" />
										</div>
									</div>

									<div class="space-4"></div>

									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-pass2">确认密码</label>

										<div class="col-sm-9">
											<input type="password" id="form-field-pass2" class="col-sm-8" />
										</div>
									</div>
								</div>
							
						

						<div class="clearfix form-actions">
							<div class="col-md-offset-5 col-md-12">
								<button onclick="editPass()" class="btn btn-info" type="button">
									<i class="ace-icon fa fa-check bigger-110"></i>
									保存
								</button>
								&nbsp; &nbsp;
								<button class="btn" type="reset">
									<i class="ace-icon fa fa-undo bigger-110"></i>
									重置
								</button>
							</div>
						</div>
					</form>
						</div>
					</div>
				</div>
				<!-- /section:elements.tab -->
			</div>
		</div>
	</div>
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
    var scripts = [null,"${contextPath}/static/ace/components/_mod/jquery.nestable/jquery.nestable.js",null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function() {
        //inline scripts related to this page
        jQuery(function($){

            $('.dd').nestable();

            $('.dd-handle a').on('mousedown', function(e){
                e.stopPropagation();
            });

            $('[data-rel="tooltip"]').tooltip();



        });
    });
</script>

<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script src=${contextPath}/static/layer/layer.js></script>
<script src="${contextPath}/static/jQuery.md5.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            username:'',
			phone:'',
			roleName:'',
            privilegeNames:[]
		}
    })

    $.ajax({
        url : '${contextPath}/sys/user/getUserInfoAndRoleAndPrivilige',
        success : function (data) {

			if(data.success) {
                //console.log(data)
                app.username = data.data.username
                app.phone = data.data.phone
                app.roleName = data.data.roleName
                app.privilegeNames = data.data.privilegeNames

            }
        },
        error : function (error) {

        }
    })
	
	var editPass = function () {
        var password = $("#form-field-pass1").val();
        var confirmPassword = $("#form-field-pass2").val();
        if(password == "") {
            layer.msg("请输入密码")
			return
		}
        if (password.length <6) {
            layer.msg("密码不能小于6位数")
            return
		}
		if (confirmPassword != password) {
            layer.msg("两次密码不一致")
            return
		}

        $.ajax({
            url : '${contextPath}/sys/user/editPassword',
            type : 'post',
            data : {
                password : $.md5(password)
            },
            success : function (data) {

                layer.msg(data.message)
            },
            error : function (error) {
                layer.msg("网络连接失败");
                //console.log(error)
            }
		})
    }
</script>